﻿
@{
    ViewData["Title"] = "ModuleMenus";
    Layout = "~/Areas/Admin/Views/Shared/_VueLayout.cshtml";
}

@section header{
    <style>
        .handle-box {
            margin-bottom: 20px;
        }

        .handle-select {
            width: 120px;
        }

        .handle-input {
            width: 300px;
            display: inline-block;
        }

        .table {
            width: 100%;
            font-size: 14px;
        }

        .red {
            color: #ff0000;
        }

        .mr10 {
            margin-right: 10px;
        }

        .table-td-thumb {
            display: block;
            margin: auto;
            width: 40px;
            height: 40px;
        }

        /*图标样式*/
        .icons-container {
            margin: 10px 20px 0;
            overflow: hidden;
        }

            .icons-container .grid {
                position: relative;
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            }

            .icons-container .icon-item {
                margin: 20px;
                height: 85px;
                text-align: center;
                width: 100px;
                float: left;
                font-size: 30px;
                color: #24292e;
                cursor: pointer;
            }

                .icons-container .icon-item span {
                    display: block;
                    font-size: 16px;
                    margin-top: 10px;
                }

            .icons-container .disabled {
                pointer-events: none;
            }
        
    </style>
}
<div id="app" v-cloak>
    <div id='wrapper'>
        <div class="container">


            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <i class="el-icon-s-order"></i>  菜单管理
                </div>

                <div class="handle-box">

                    <el-button type="primary" icon="el-icon-plus" v-on:click='handleAdd' class="handle-del mr10">新增菜单</el-button>


                </div>

                <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border default-expand-all
                          :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                    <el-table-column prop="text" label="菜单名称" sortable width="180">
                    </el-table-column>
                    <el-table-column prop="item.code" label="菜单编码" sortable width="180">
                    </el-table-column>
                    <el-table-column prop="item.url" label="地址">
                    </el-table-column>
                    <el-table-column prop="iconCls" label="图标">
                        <template slot-scope="scope">
                            <i :class="scope.row.iconCls"></i>
                            <span style="margin-left: 10px">{{ scope.row.iconCls }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="item.seq" label="排序">
                    </el-table-column>
                    <el-table-column prop="item.visible" width="80px" label="显示">
                        <template slot-scope="scope">
                            <el-switch v-on:change="visibleChange(scope.row.item)" v-model="scope.row.item.visible" active-color="#13ce66" inactive-color="#ddd">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column prop="item.often" width="80px" label="常用菜单">
                        <template slot-scope="scope">
                            <el-switch v-on:change="oftenChange(scope.row.item)" v-model="scope.row.item.often" active-color="#13ce66" inactive-color="#ddd">
                            </el-switch>
                        </template>
                    </el-table-column>

                    <el-table-column prop="item.modifiedTime" label="更新时间">
                    </el-table-column>
                    <el-table-column prop="item.modifier" label="更新人">
                    </el-table-column>
                    <el-table-column label="操作" width="180" align="center">
                        <template slot-scope="scope">
                            <el-button type="text" icon="el-icon-edit" v-on:click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button type="text" icon="el-icon-delete" class="red" v-on:click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                </el-card>
        </div>


        <!-- 新增弹出框 -->
        <el-dialog :title="formModel.id?'编辑菜单':'编辑菜单'" :visible.sync="formVisible" width="30%">
            <el-form ref="formMain" :model="formModel" label-width="70px">
                <el-form-item label="菜单名称">
                    <el-input v-model="formModel.menuName"></el-input>
                </el-form-item>
                <el-form-item label="上级菜单">
                    <el-cascader v-model="formModel.fid"  placeholder="不选表示无上级" :options="tableData" :props="{checkStrictly: true , label: 'text',value:'id' }"></el-cascader>
                </el-form-item>
                <el-form-item label="所属节点">
                    <el-select v-model='formModel.code' v-on:change="changeCode" placeholder="请选择">
                        <el-option v-for="item in pageData" :key="item.code" :label="item.name" :value="item.code">
                            <span style="float: left">{{ item.name }}|{{item.code}}</span>
                        </el-option>
                    </el-select>
                    <!-- <el-input v-model="form.address"></el-input> -->
                </el-form-item>
                <el-form-item label="菜单链接">
                    <el-input v-model="formModel.url"></el-input>
                </el-form-item>
                <el-form-item label="图标">
                    <el-input v-model="formModel.icon">

                        <template slot="append">
                            <div  v-on:click="selectIcons()" style="cursor:pointer; height:12px;width:12px">
                                <i :class='formModel.icon?formModel.icon:"el-icon-s-grid"' ></i>
                            </div>
                        </template>

                    </el-input>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input-number v-model="formModel.seq" :min="1" :max="100" label="请输入排序"></el-input-number>

                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button v-on:click="formVisible = false">取 消</el-button>
                <el-button type="primary" v-on:click="saveForm">确 定</el-button>
            </span>
        </el-dialog>


        <!--选择图标-->
        <el-dialog title="选择图标" :visible.sync="iconsVisible" width="60%">

            <div class="icons-container">
                <!-- -->
                <el-tabs type="border-card">
                    <el-tab-pane label="Element-UI图标">
                        <div class="grid">
                            <div v-for="item of elementIcons" :key="item" v-on:click="handleClipboard(generateElementIconCode(item),$event)">
                                <el-tooltip placement="top">
                                    <div slot="content">
                                        {{ generateElementIconCode(item) }}
                                    </div>
                                    <div class="icon-item">
                                        <i :class="'el-icon-' + item"></i>
                                        <span>{{ item }}</span>
                                    </div>
                                </el-tooltip>

                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="Icons">

                    </el-tab-pane>

                </el-tabs>
            </div>

        </el-dialog>

    </div>


</div>


@section footer{
    <script type="text/javascript" src="~/v/js/clipboard.min.js"></script>

    <script type="text/javascript" src="~/v/utils/clipboard.js"></script>

    <script type="text/javascript" src="~/v/element-ui/element-icons.js"></script>
    <script type="text/javascript">

      var vue=  new Vue({
            el: "#app",
            data: function () {
                return {
                    elementIcons: elementIcons,
                    pageData: [],
                    tableData: [],
                    formVisible: false,
                    formModel: {
                        seq: 1,
                        fid: 0,
                        code: "",
                        url: ""
                    },
                    iconsVisible: false

                }
            },
            created() {
                var that = this;
                this.getDatas();
                this.getPages();
            },
            methods: {
                selectIcons: function () {
                    this.iconsVisible = true;


                },
                generateIconCode(symbol) {
                    return `<svg-icon icon-class="${symbol}" />`
                },
                generateElementIconCode(symbol) {
                    return `el-icon-${symbol}`
                },
                handleClipboard(text, event) {
                    this.formModel.icon = text;
                    this.iconsVisible = false;

                },
                getDatas: function () {
                    var that = this;
                    request.get("/admin/menu/tree").then(function (res) {
                        console.log(res.data);
                        that.tableData = res.data.data;
                        //that.tableData.push({
                        //    id: 0,
                        //    text:"无上级菜单"
                        //})

                    });
                },
                getPages: function () {
                    var that = this;
                    request.get("/admin/Permission/QueryPages").then(function (res) {
                        that.pageData = res.data;
                    });
                },
                getMenuSelect: function () {


                },
                goBack: function () {

                },
                handleAdd: function () {
                    this.fromModel = {
                        seq: 1,
                        fid: 0,
                        code: "",
                        url: ""
                    };
                    this.formVisible = true;
                    //this.getPages();
                },
                handleEdit: function (index, row) {
                    console.log(row.item);
                    //this.getPages();

                    this.formModel = row.item;
                    this.formVisible = true;
                },
                handleDelete: function (index, row) {
                    var that = this;
                    this.$confirm('此操作将永久删除该项, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        request.delete("/admin/Menu/Delete?id=" + row.id).then(function (res) {
                            that.$message.success(res.data.msg);
                            that.getDatas();
                        });

                    });

                },
                saveForm: function () {
                    if (this.formModel.id) {
                        this.saveEdit();
                    } else {
                        this.saveAdd();
                    }
                },
                saveAdd: function () {
                    var that = this;
                    var data = JSON.parse(JSON.stringify(that.formModel));
                    data.fid = data.fid[data.fid.length - 1];
                    request.post("/admin/Menu/Add", data).then(function (res) {
                        that.formVisible = false;
                        that.$message.success(res.data.msg);
                        that.getDatas();
                    });
                },
                saveEdit: function () {
                    var that = this;
                    var data = NewModel(that.formModel);
                    if (data.fid.length > 0) {
                        data.fid = data.fid[data.fid.length - 1];
                    }
                  
                    request.post("/admin/Menu/Update", data).then(function (res) {
                        that.formVisible = false;
                        that.$message.success(res.data.msg);
                        that.getDatas();
                    });
                },
                changeCode: function (value) {
                    var url = this.getUrlByCode(value);
                    this.formModel.url = url;
                },
                getUrlByCode: function (code) {
                    var s = code.replace(/_/g, "/");
                    s = ("/" + s).substring(0, s.length - 3);
                    return s;
                },
                visibleChange: function (obj) {
                    var that = this;
                    request.put("/admin/Menu/VisibleChange?id=" + obj.id + "&visible=" + obj.visible, {}).then(function (res) {
                        that.$message.success(res.data.msg);
                    });
                },
                oftenChange: function (obj) {
                    var that = this;
                    request.put("/admin/Menu/OftenChange?id=" + obj.id + "&often=" + obj.often, {}).then(function (res) {
                        that.$message.success(res.data.msg);
                    });
                }


            }

        });

    </script>

}
